<template>

  <!-- 搜索框 -->
  <div style="margin-bottom: 10px;">


    <!-- 筛选框 -->
    <div style="margin-bottom: 10px;">
      
        <el-select filterable v-model="StuClazzIvwVo.clazzName" placeholder="班级名称" clearable
        style="width: 200px; margin-right: 10px;">
        <el-option v-for="option in employmentNameOptions" :key="option" :label="option"
          :value="option" />
      </el-select>
      <!-- <el-input v-model="StuClazzIvwVo.clazzStatus" placeholder="就业状态" clearable
        style="width: 200px; margin-right: 10px;" /> -->
      <el-select filterable v-model="StuClazzIvwVo.clazzStatus" placeholder="就业状态" clearable
        style="width: 200px; margin-right: 10px;">
        <el-option v-for="option in employmentStatusOptions" :key="option.value" :label="option.label"
          :value="option.value" />
      </el-select>



      <el-button type="primary" @click="list()">查询</el-button>
      <el-button  @click="removeList()">清空</el-button>
    </div>

    <div>
      <!-- 数据表格 -->
      <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="stuId" label="学生ID" width="100" />
        <el-table-column prop="stuName" label="姓名" width="120" />
        <el-table-column prop="stuGender" label="性别" width="100" />
        <el-table-column prop="stuAge" label="年龄" width="100" />
        <el-table-column prop="stuEdu" label="学历" width="120" />
        <el-table-column prop="stuMajor" label="专业" width="150" />
        <el-table-column prop="stuGrad" label="毕业时间" width="150" />

        <el-table-column prop="clazzName" v-if="false"/>
        <el-table-column prop="clazzTeacher" v-if="false"/>
        <el-table-column prop="clazzManager" v-if="false"/>

        <el-table-column prop="stuStatus" label="就业状态" width="150" />

        <el-table-column label="操作" >
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleDetail(row)">详情</el-button>

            <el-button type="danger" size="small" @click="handleDelete(row.stuId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 学生详情对话框 -->
      <el-dialog v-model="detailDialogVisible" title="学生详细信息" width="700px">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学生ID">{{ currentDetail.stuId }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ currentDetail.stuName }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentDetail.stuGender }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ currentDetail.stuAge }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{ currentDetail.stuEdu }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ currentDetail.stuMajor }}</el-descriptions-item>
          <el-descriptions-item label="毕业时间">{{ formatTime(currentDetail.stuGrad) }}</el-descriptions-item>
          <el-descriptions-item label="班级名称">{{ currentDetail.clazzName }}</el-descriptions-item>
          <el-descriptions-item label="班主任">{{ currentDetail.clazzTeacher }}</el-descriptions-item>
          <el-descriptions-item label="项目经理">{{ currentDetail.clazzManager }}</el-descriptions-item>
          <el-descriptions-item label="就业状态">
            {{ currentDetail.stuStatus || '未设置' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>

    </div>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElMessage, ElMessageBox, ElUpload } from 'element-plus';
import { getEmploymentApi } from '@/api/clazz-api';
import { deleteStudentApi } from '@/api/stu-api';
import { GetClazzNameApi } from '@/api/clazz-api';
// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(10);

// 表格数据
const tableData = ref([{
  clazzName:'',


}]);

// 就业状态选项
const employmentStatusOptions = [
  { value: '已就业', label: '已就业' },
  { value: '未就业', label: '未就业' },

];




// 格式化时间的方法  去掉T
const formatTime = (time: string) => {
  if (!time) return '';
  return time.replace('T', ' ');
}

//对象
const StuClazzIvwVo = ref({
  clazzName: '',
  clazzStatus: '',
  page: 1,
  size: 10,
});
// 查询列表
const list = async () => {
  localStorage.removeItem('employmentJson')
  StuClazzIvwVo.value.page = (currentPage.value - 1) * pageSize.value;
  StuClazzIvwVo.value.size = pageSize.value;
  const response = await getEmploymentApi(StuClazzIvwVo.value);
  console.log('查询列表', response);
  if (response.code === 200) {
    tableData.value = response.data.list;
    total.value = response.data.total;
    
    



  } else {
    ElMessage.error('查询失败');
  }
};
let employmentNameOptions :any=ref([])
const updateEmploymentNameOptions = async () => {
  const response = await GetClazzNameApi();
  if (response.code === 200) {
    employmentNameOptions.value = response.data; 
  } else {
  }
};
const detailDialogVisible = ref(false);
const currentDetail = ref({
  stuId: '',
  stuName: '',
  stuGender: '',
  stuAge: '',
  stuEdu: '',
  stuMajor: '',
  stuGrad: '',
  clazzName: '',
  clazzTeacher: '',
  clazzManager: '',
  stuStatus: '',
});

const handleDetail = async (row: any) => {
  currentDetail.value = { ...row };
  detailDialogVisible.value = true;


};

const getStorage = async () => {
  const item = localStorage.getItem('employmentJson');
  if (item) {
    const data = JSON.parse(item);
    StuClazzIvwVo.value.clazzName = data.clazzName;
    StuClazzIvwVo.value.clazzStatus = data.clazzStatus;
    StuClazzIvwVo.value.page = (currentPage.value - 1) * pageSize.value;
    StuClazzIvwVo.value.size = pageSize.value;
    // 分页模糊查询参数
    const response = await getEmploymentApi(StuClazzIvwVo.value);
    console.log('查询列表', response);
    if (response.code === 200) {
      tableData.value = response.data.list;
      total.value = response.data.total;
      // localStorage.removeItem('employmentJson')


    } else {
      ElMessage.error('查询失败');
    }
    // 现在可以使用data变量了
  } else {
    console.error('No data found in localStorage for key "employmentJson"');
  }

}

//返回列表
const removeList = async () => {
  StuClazzIvwVo.value.clazzName = '';
  StuClazzIvwVo.value.clazzStatus = '';

  StuClazzIvwVo.value.page = 1;
  StuClazzIvwVo.value.size = 10;
  list();
};
// 处理每页显示条数变化的事件
const handleSizeChange = (newPageSize: number) => {
  pageSize.value = newPageSize;
  list();
};

// 处理当前页码变化的事件
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  list();
};



// 删除学生信息
const handleDelete = async (id: number) => {
  try {
    // 弹出确认对话框
    await ElMessageBox.confirm(
      '确认删除该学生信息吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );

    // 调用删除接口
    const response = await deleteStudentApi(id);
    if (response.code === 200) {
      ElMessage.success('删除成功');
      list(); // 刷新表格数据
    } else {
      ElMessage.error(response.data?.message || '删除失败');
    }
  } catch (error) {
    if (error === 'cancel') {
      // 用户点击了取消按钮
      ElMessage.info('已取消删除');
    } else {
      // 其他错误（如网络错误或后端异常）
      console.error('删除失败:', error);
      ElMessage.error('删除失败，请稍后再试');
    }
  }
};






// 页面加载完后，加载默认数据
onMounted(() => {
  updateEmploymentNameOptions();
  const item = localStorage.getItem('employmentJson');
  if (item) {
    getStorage();
    localStorage.removeItem('employmentJson')
  } else {
    list();
  }
});

// 表格行样式
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  row
  if (rowIndex % 2 === 0) {
    return 'success-row'
  }
  return ''
}
</script>

<style scoped>
.demo-pagination-block {
  margin-top: 10px;
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>